<template>
  <div class="hello">
    {{"哈哈"}}<br/>
    {{20+30}}
    {{"ok"?'yes':'no'}}
    {{msg.split('').reverse().join('')}}
    {{3+5}}
    <p v-once>{{msg}}</p>
    {{hello}}
    <div v-html="hello"></div>
    <a v-bind:href="url">{{url_name}}</a>
    <div :class="divClass">容器</div>
    <div :class="div2Class">容器2</div>
    <div v-if="flag">孙悟空</div>
    <div v-else>刘艳玲后</div>
    <div v-show="flag">王者荣耀</div>
    <ul>
      <li v-for="(item,index) in names" :key="item">{{index}}--{{item}}</li>
    </ul>
    <ul>
      <li v-for="(value,key,index) in obj" :key="index">{{value}}--{{key}}--{{index}}</li>
    </ul>
    <button v-on:click="clickHandle('呵呵',$event)">后台打印{{msg}}</button>
    <ul>
      <li v-for="(item,index) in helloArr" :key="index">{{item}}</li>
    </ul>
    <button @click="addHandler">数组添加项</button>
  </div>
</template>

<script>
  export default{
    name:'HelloWorld',
    data(){
      return {
        msg:'Welcome to Your Vue.js App',
        hello:"<p>hello world</p>",
        url_name:"百度",
        url:"http://www.taobao.com",
        divClass:"isActive",
        div2Class:"list",
        flag:false,
        names:["hehe","ice","iwen"],
        obj:{
          name:"sky",
          age:30,
          agender:"male"
        },
        helloArr:['hello1','hello2','hello3']
      }
    },
    methods: {
      clickHandle:function(data,e){
        // console.log(this.msg);
        // console.log(e);
        // console.log(this);
        console.log(data,e);
        this.flag?this.flag=false:this.flag=true;
      },
      addHandler:function(e){
        // console.log(e);
        this.helloArr.unshift('呵呵哒');
        // this.helloArr.concat ('呵呵哒');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
